window.addEventListener('load', function () {
  let shopArr = [
      {
          picture: 'https://gw.alicdn.com/bao/uploaded/i4/4258375069/O1CN01oZWgbA1nJeTUuHo58_!!0-item_pic.jpg_300x300q90.jpg_.webp',
          name: '拖鞋女防滑情侣eva踩屎感男士凉拖',
          spec: { color: '粉色' },
          price: 25.00,
          count: 1
      },
      {
          picture: 'https://yanxuan-item.nosdn.127.net/fa3d10a78d37bbd3956ef5f8c855d1dc.jpg',
          name: '休闲潮流运动男士胸包',
          spec: { color: '黑色' },
          price: 136.00,
          count: 1
      },
      {
          picture: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/2215676543957/O1CN01ZOEObC1f6M4MI8EDD_!!2215676543957.jpg_250x250.jpg_.webp',
          name: '全新川崎小忍者跑车400cc摩托车',
          spec: { color: '黑色', size: '160cm', form: '日本' },
          price: 9998.00,
          count: 1
      }
  ]

  let tbody = document.querySelector('tbody')
  const render = () => {
      tbody.innerHTML = ''
      let str = ''

      shopArr.forEach((e, index) => {
          tbody.innerHTML = str += `<tr>
                          <td width="120">
                              <input type="checkbox" class="checkTop">
                          </td>
                          <td width="400" class="goods">
                              <a href="#">
                                  <img src="${e.picture}"
                                      alt=""></a>
                              <div>
                                  <p class="ellipsis">${e.name}</p>
                                  <div class="cartSku">
                                  <div class="attrs">
                                      <span class="ellipsis">颜色：${Object.values(e.spec).join('/')}</span>
                                      <i class="el-icon-arrow-down downEl"></i>
                                  </div>
                                  <div class="layerSku">
                                      <div class="goodsSku">
                                          <dl>
                                              <dt>颜色</dt>
                                              <dd class="ddAction">
                                                  <img class="selected"
                                                      src="https://gw.alicdn.com/imgextra/i3/2215084225188/O1CN01EFtrMW1oC9cUrPyOO_!!0-item_pic.jpg_Q75.jpg_.webp"
                                                      title="橘色" alt="">
                                                  <img src="https://gw.alicdn.com/bao/uploaded/i4/2215084225188/O1CN01ysJcpu1oC9cUPIdCg_!!2215084225188.jpg_Q75.jpg_.webp"
                                                      title="蓝色" alt="">
                                              </dd>
                                          </dl>
                                          <dl>
                                              <dt>尺码</dt>
                                              <dd class="ddSction">
                                                  <span class="selected">40（女）</span>
                                                  <span>39（女）</span>
                                                  <span>35</span>
                                                  <span>42</span>
                                                  <span>43</span>
                                                  <span>40（男）</span>
                                                  <span>41</span>
                                                  <span>38</span>
                                                  <span>39（男）</span>
                                                  <span>36</span>
                                              </dd>
                                          </dl>
                                      </div>
                                      <button class="ellipsis xtxButton">确认</button>
                                  </div>
                              </div>
                              </div>
                          </td>
                          <td width="220" class="tc">
                              <p>¥${e.price}</p>
                          </td>
                          <td width="180" class="tc">
                              <div class="xtxNumbox">
                                  <div class="numbox">
                                      <a href="javascript:;" class="plus">-</a>
                                      <input class="inputs" type="text" readonly value="${e.count}">
                                      <a href="javascript:;" class="minus">+</a>
                                  </div>
                              </div>
                          </td>
                          <td width="180" class="tc tt">
                              ¥<p class="count">${(e.price * e.count).toFixed(2)}</p>
                          </td>
                          <td width="140" class="tc tw">
                              <p><a href="javascript:;">
                                      移入收藏夹
                                  </a></p>
                              <p class="pw"><a href="javascript:;" class="delete" data-index="${index}">
                                      删除
                                  </a></p>
                              <p><a href="javascript:;">
                                      找相似
                                  </a></p>
                          </td>
                      </tr>`

      })
      tbody.innerHTML = str
      getstr(shopArr)
  }
  render()
  //删除所选物品
  let conceal= document.querySelector('.conceal')
  let confirm = document.querySelector('.confirm')

  document.querySelector('.deleTer').addEventListener('click', function () {
    conceal.style.display = 'block'
      document.querySelector('.delete').style.display = 'block'
      getSttr()
  })
  confirm.addEventListener('click', removeDivs)
  getShow()

  //删除所选全部物品的函数
  function removeDivs() {
      if (conceal.style.display = 'block') {
          let trs = document.querySelectorAll('.xtx_tbody>tr')     //设为局部变量
          let checkBoxs = document.querySelectorAll('.xtx_tbody>tr input[type=checkbox]');
          for (let i = 0; i < trs.length; i++) {
              if (checkBoxs[i].checked) {
                  document.querySelector('.xtx_tbody').removeChild(trs[i])
              }
          }
      }
      conceal.style.display = 'none'
      sumCount()
      getShow()
  }
  function getSttr() {
      document.querySelector('.cephalic a').addEventListener('click', function () {
        conceal.style.display = 'none'
      })
      document.querySelector('.cancel').addEventListener('click', function () {
        conceal.style.display = 'none'
      })
  }
  //删除单个指定物品
  function getDel() {
      let deletes = document.querySelectorAll('.delete')
      for (let i = 0; i < deletes.length; i++) {
          deletes[i].addEventListener('click', function (e) {
            conceal.style.display = 'block'
              getSttr()
              confirm.addEventListener('click', function () {
                  if (document.querySelector('.xtx_tbody').contains(deletes[i].parentNode.parentNode.parentNode)) {
                      document.querySelector('.xtx_tbody').removeChild(deletes[i].parentNode.parentNode.parentNode)
                  }
                  sumCount()
                  getShow()
              })
              shopArr.splice(e.target.dataset.index, 1)
          })

      }
  }
  getDel()
  // 数据为空时显示的内容
  function getShow() {
      if (tbody.innerHTML === '') {
          tbody.innerHTML = `<tr>
          <td colspan="6">
          <div class="tbOne">
                          <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/none.5c042de4.png" alt="">
                          <p>购物车内暂时没有商品</p>
                          <div class="tbTwo">
                              <a href="./index.html" class="btn">继续逛逛</a>
                          </div>
                          </td>
                          </tr>`
      }
  }

  let plus = document.querySelectorAll('.plus')
  let minus = document.querySelectorAll('.minus')
  let count = document.querySelectorAll('.count')
  let input = document.querySelectorAll('.inputs')

  // 减号点击事件
  function getSum() {
      for (let i = 0; i < shopArr.length; i++) {
          plus[i].addEventListener('click', function () {
              input[i].value--
              if (input[i].value < 1) {
                  input[i].value = 1
              }
              count[i].innerHTML = `${(shopArr[i].price * input[i].value).toFixed(2)}`
              sumCount()
          })
      }
      sumCount()
      // 加号点击事件

      for (let i = 0; i < shopArr.length; i++) {
          minus[i].addEventListener('click', function () {
              input[i].value++
              count[i].innerHTML = `${(shopArr[i].price * input[i].value).toFixed(2)}`
              sumCount()
          })
      }
  }
  getSum()
  //总数量以及总计价格功能
  let checkBoxs = document.querySelectorAll('.xtx_tbody>tr input[type=checkbox]')
  for (let i = 0; i < checkBoxs.length; i++) {
      checkBoxs[i].addEventListener('click', sumCount);
  }
  //总数和总价格函数刷新
  function sumCount() {
      let trs = document.querySelectorAll('.xtx_tbody>tr')

      let counts = 0
      let sunPrice = 0
      let count = 0
      for (let i = 0; i < trs.length; i++) {
          // sunPrice += +(shopArr[i].price * input[i].value).toFixed(2)
          counts += parseInt(trs[i].querySelector('input[type=text]').value)
          if (trs[i].querySelector('input[type=checkbox]').checked) {
              count += parseInt(trs[i].querySelector('input[type=text]').value)
              sunPrice += parseInt(trs[i].querySelector('.count').innerHTML)
          }
      }
      document.querySelector('.allIn').innerHTML = counts
      document.querySelector('.pitchOn').innerHTML = parseInt(count)   //总数成功改变
      document.querySelector('.totalPrice').innerHTML = `￥${sunPrice.toFixed(2)}`  //总的价格改变 

  }
  // 全选按钮点击事件
  let check = document.querySelector('.checkBox')
  let checks = document.querySelector('.checkBoxs')
  let checkTops = document.querySelectorAll('.checkTop')
  check.addEventListener('click', function () {
      for (let i = 0; i < checkTops.length; i++) {
          checkTops[i].checked = check.checked
          if (checkTops[i].checked = check.checked) {
              checks.checked = true
          } else {
              checks.checked = false
          }
      }
      sumCount()
  })
  checks.addEventListener('click', function () {
      for (let i = 0; i < checkTops.length; i++) {
          checkTops[i].checked = checks.checked
          if (checkTops[i].checked) {
              check.checked = true
          } else {
              check.checked = false
          }
      }
      sumCount()
  })
  //复选框点击事件
  for (let i = 0; i < checkTops.length; i++) {
      checkTops[i].addEventListener('click', function () {
          if (checkTops.length === document.querySelectorAll('.checkTop:checked').length) {
              check.checked = true
          } else {
              check.checked = false
          }
      })
  }
  for (let i = 0; i < checkTops.length; i++) {
      checkTops[i].addEventListener('click', function () {
          if (checkTops.length === document.querySelectorAll('.checkTop:checked').length) {
              checks.checked = true
          } else {
              checks.checked = false
          }
      })
  }
  // 商品信息选择点击事件

  function getstr() {
      let cartSku = document.querySelector('.cartSku')
      let layer = document.querySelector('.layerSku')
      cartSku.addEventListener('click', function (e) {
          e.stopPropagation()
          layer.style.display = 'block'
      })

      document.body.addEventListener('click', function (e) {
          layer.style.display = 'none'
      })

      let ddAction = document.querySelector('.ddAction')
      let ddSction = document.querySelector('.ddSction')

      ddAction.addEventListener('click', function (e) {
          if (e.target.tagName === 'IMG') {
              document.querySelector('img.selected').classList.remove('selected')
              e.target.classList.add('selected')
          }
      })

      ddSction.addEventListener('click', function (e) {
          if (e.target.tagName === 'SPAN') {
              document.querySelector('span.selected').classList.remove('selected')
              e.target.classList.add('selected')
          }
      })

      let btn = document.querySelector('.xtxButton')
      btn.addEventListener('click', function () {

      })

      //  确认点击
      let xtxButton = document.querySelector('.xtxButton')
      let selected = document.querySelector('.selected')
      xtxButton.addEventListener('click', function () {
          shopArr[0].spec.color = selected.title
          shopArr[0].spec.size = selected.value
          layer.style.display = 'none'
      })
  }
  // 下单结算点击事件
  let btns = document.querySelector('.btns')
  let xtxMsssageCon = document.querySelector('.xtxMsssageCon')
  let is = document.querySelector('.xtxMsssageCon i')
  let ps = document.querySelector('.xtxMsssageCon p')

  btns.addEventListener('click', function () {
      getDel()
      if (shopArr.length === 0) {
          xtxMsssageCon.style.display = 'block'
          xtxMsssageCon.style.color = `rgb(230, 162, 60)`
          xtxMsssageCon.style.backgroundColor = `rgb(253, 246, 236)`
          xtxMsssageCon.style.borderColor = `rgb(250, 236, 216)`
          is.classList.add('el-icon-warning')
          ps.innerHTML = `至少选中一件商品`
          setTimeout(function () {
              xtxMsssageCon.style.display = 'none'
          }, 2000)
      } else {
          location.href = '#'
      }

  })

})

















